<template>
  <div>
    <template>
      <!-- 首页顶部组件定位 -->
      <div :class="{ fixed: isFixed }">
        <HeaderNav />
        <OpenApp />
        <FilmTopNav />
      </div>
    </template>

    <transition
      mode="out-in"
      :duration="{ enter: 500, leave: 500 }"
      enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// 引入顶部导航
import HeaderNav from "@/components/HeaderNav";
import OpenApp from "@/components/OpenApp";
import FilmTopNav from "@/components/FilmTopNav";

// 使用animate.css动画效果 首先安装 npm i -S animate.css
// 导入动画样式
import "animate.css";
export default {
  data() {
    return {
      isFixed: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
      // 6、根据滚动条高度来决定是否吸顶
      if (scrollTop >= 1) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    });
  },
  components: {
    HeaderNav,
    OpenApp,
    FilmTopNav,
  },
};
</script>
<style lang='scss' scoped>
div {
  width: 100%;
  z-index: 10;
}
.fixed {
  position: fixed;
  top: 0;
}

</style>

